import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class SignIn extends StatefulWidget {
  const SignIn({Key? key}) : super(key: key);

  @override
  _SignInState createState() => _SignInState();
}

class _SignInState extends State<SignIn> {
  @override
  Widget build(BuildContext context) {
    return CupertinoScaffold(
      body: Builder(
          builder: (context) {
            return Scaffold(
                backgroundColor: const Color.fromRGBO(27, 38, 44, 1),
                body: SingleChildScrollView(
                  child: Column(
                    children: [
                      SizedBox(
                        width: double.infinity,
                        height: 235,
                        child: Stack(
                          fit: StackFit.expand,
                          clipBehavior: Clip.none,
                          children: [
                            Image.asset("images/signIn/RapAlbums.png",
                                fit: BoxFit.cover),
                            const DecoratedBox(
                                decoration: BoxDecoration(
                                  color: Color.fromRGBO(27, 38, 44, 0.4),
                                )),
                            Positioned(
                                left: 0,
                                right: 0,
                                top: 180,
                                child: Container(
                                  height: 75,
                                  decoration: const BoxDecoration(
                                      gradient: LinearGradient(
                                          begin: Alignment.bottomCenter,
                                          end: Alignment.topCenter,
                                          colors: [
                                            Color.fromRGBO(27, 38, 44, 0.8),
                                            Color.fromRGBO(27, 38, 44, 0),
                                          ],
                                          stops: [
                                            0.4,
                                            1
                                          ])),
                                ))
                          ],
                        ),
                      ),
                      Theme(
                        data: Theme.of(context).copyWith(
                          hintColor: Colors.transparent, //定义下划线颜色
                        ),
                        child: Form(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 20),
                              child: Column(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  const SizedBox(height: 41),
                                  const Text("Sign in",
                                      style: TextStyle(
                                          fontSize: 30,
                                          fontWeight: FontWeight.w800,
                                          letterSpacing: 0.2,
                                          color: Color.fromRGBO(
                                              249, 248, 255, 1))),
                                  const SizedBox(
                                    height: 20,
                                  ),
                                  SizedBox(
                                    height: 50,
                                    child: TextFormField(
                                      style: const TextStyle(
                                          fontSize: 16, color: Colors.white),
                                      cursorColor: Colors.white,
                                      keyboardType: TextInputType.emailAddress,
                                      decoration: InputDecoration(
                                        contentPadding:
                                        const EdgeInsets.symmetric(
                                            horizontal: 25),
                                        hintText: "Email",
                                        hintStyle: const TextStyle(
                                            fontSize: 16, color: Colors.white),
                                        enabledBorder: OutlineInputBorder(
                                          borderRadius: BorderRadius.circular(25),
                                          borderSide: const BorderSide(
                                              width: 0,
                                              color: Colors.transparent),
                                        ),
                                        focusedBorder: OutlineInputBorder(
                                          borderRadius: BorderRadius.circular(25),
                                          borderSide: const BorderSide(
                                              width: 2, color: Colors.blue),
                                        ),
                                        filled: true,
                                        fillColor: const Color.fromRGBO(
                                            41, 57, 66, 1),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  SizedBox(
                                    height: 50,
                                    child: TextFormField(
                                      style: const TextStyle(
                                          fontSize: 16, color: Colors.white),
                                      cursorColor: Colors.white,
                                      keyboardType: TextInputType.number,
                                      obscureText: true,
                                      decoration: InputDecoration(
                                        contentPadding:
                                        const EdgeInsets.symmetric(
                                            horizontal: 25),
                                        hintText: "Password",
                                        hintStyle: const TextStyle(
                                            fontSize: 16, color: Colors.white),
                                        enabledBorder: OutlineInputBorder(
                                          borderRadius: BorderRadius.circular(25),
                                          borderSide: const BorderSide(
                                              width: 0,
                                              color: Colors.transparent),
                                        ),
                                        focusedBorder: OutlineInputBorder(
                                            borderRadius: BorderRadius.circular(
                                                25),
                                            borderSide: const BorderSide(
                                                width: 2, color: Colors.blue)),
                                        filled: true,
                                        fillColor: const Color.fromRGBO(
                                            41, 57, 66, 1),
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 25),
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment
                                          .spaceBetween,
                                      children: const [
                                        Text('Remember me',
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: Colors.white,
                                                height: 3)),
                                        Text('Forget Password',
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: Colors.white,
                                                height: 3)),
                                      ],
                                    ),
                                  ),
                                  const SizedBox(
                                    height: 40,
                                  ),


                                  Ink(
                                    decoration: BoxDecoration(
                                      color: const Color.fromRGBO(
                                          121, 113, 233, 1),
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    child: InkWell(
                                      borderRadius: BorderRadius.circular(4),
                                      splashColor: const Color.fromRGBO(
                                          121, 113, 233, 1),
                                      //   splashColor:Colors.transparent,
                                      highlightColor: const Color.fromRGBO(
                                          41, 57, 66, 1),
                                      onTap: () {},

                                      child: Container(
                                        width: 187,
                                        height: 50,
                                        alignment: Alignment.center,
                                        child: const Text(
                                          'Sign in',
                                          style: TextStyle(
                                              fontSize: 20,
                                              color: Colors.white,
                                              fontWeight: FontWeight.w900),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Stack(alignment: Alignment.center, children: [
                                    const Divider(
                                      indent: 25,
                                      endIndent: 25,
                                      height: 60,
                                      thickness: 2,
                                      color: Color.fromRGBO(151, 151, 151, 1),
                                    ),
                                    Container(
                                      width: 60,
                                      alignment: Alignment.center,
                                      decoration: const BoxDecoration(
                                        color: Color.fromRGBO(27, 38, 44, 1),
                                      ),
                                      child: const Text(
                                        'OR',
                                        style: TextStyle(
                                          fontSize: 20,
                                          color: Colors.white,
                                          fontWeight: FontWeight.w800,
                                        ),
                                      ),
                                    ),
                                  ]),

                                  // Ink 为 InkWell 和 InkResponse 基座
                                  Ink(
                                    decoration: BoxDecoration(
                                      color: const Color.fromRGBO(41, 57, 66, 1),
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    child: InkWell(
                                      splashColor: const Color.fromRGBO(
                                          41, 57, 66, 1),
                                      highlightColor:
                                      const Color.fromRGBO(121, 113, 233, 1),
                                      borderRadius: BorderRadius.circular(4),
                                      onTap: () {
                                        CupertinoScaffold
                                            .showCupertinoModalBottomSheet(
                                          context: context,
                                          builder: (context) => Container(
                                              height: 300,
                                              padding:const EdgeInsets.symmetric(vertical: 20,horizontal: 10),
                                              child:Column(
                                                children: [
                                                  Row(
                                                    mainAxisAlignment: MainAxisAlignment.center,
                                                    children: [
                                                      ElevatedButton(
                                                          onPressed: () {},
                                                          child: const Text('abc'),
                                                          style: ButtonStyle(
                                                            shape: MaterialStateProperty.all(
                                                                RoundedRectangleBorder(
                                                                    borderRadius:
                                                                    BorderRadius.circular(25))),
                                                            backgroundColor:
                                                            MaterialStateProperty.all(Colors.red),
                                                          )),
                                                      ElevatedButton(
                                                          onPressed: () {},
                                                          child: const Text('def'),
                                                          style: ElevatedButton.styleFrom(
                                                            // 改变背景色
                                                            primary: Colors.orange,
                                                            // 改变文字颜色
                                                            onPrimary: Colors.blue,
                                                            shape: RoundedRectangleBorder(
                                                              borderRadius: BorderRadius.circular(
                                                                  25),
                                                            ),
                                                          )),
                                                    ],
                                                  ),
                                                  const SizedBox(height: 30),
                                                  Material(
                                                    child: Ink(
                                                      decoration: const BoxDecoration(
                                                          gradient: LinearGradient(
                                                              begin: Alignment.topLeft,
                                                              end: Alignment.bottomRight,
                                                              colors: [
                                                                Color(0xFFDE2F21),
                                                                Color(0xFFEC592F)
                                                              ]),
                                                          borderRadius:
                                                          BorderRadius.all(Radius.circular(20))),
                                                      child: InkWell(
                                                        borderRadius:
                                                        const BorderRadius.all(Radius.circular(20)),
                                                        child: Container(
                                                          padding: const EdgeInsets.symmetric(
                                                              vertical: 8, horizontal: 20),
                                                          child: const Text(
                                                            '这是InkWell的点击效果',
                                                            style: TextStyle(color: Colors.white),
                                                          ),
                                                        ),
                                                        onTap: () {},
                                                      ),
                                                    ),
                                                  )
                                                ],
                                              )
                                          ),
                                        );
                                      },
                                      child: Container(
                                        width: 113,
                                        height: 50,
                                        alignment: Alignment.center,
                                        child: const Text(
                                          'Sign up',
                                          style: TextStyle(
                                              fontSize: 20,
                                              color: Colors.white,
                                              fontWeight: FontWeight.w900),
                                        ),
                                      ),
                                    ),
                                  ),

                                ],
                              ),
                            )),
                      ),
                    ],
                  ),
                ));
          }
      ),
    );
  }
}
